<template>
  <div class="mod-config">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in tableList"
        :key="index"
        :label="item.meterName"
        :name="item.meterNo"
      >
      </el-tab-pane>
      <album-product-theme v-if="activeName === 'first'" ref="albumProductTheme" :key="new Date().getTime()"></album-product-theme>
      <album-product-widge v-if="activeName === 'second'" ref="albumProductWidge" :key="new Date().getTime()" ></album-product-widge>
      <album-product-wallpaper v-if="activeName === 'third'" ref="albumProductWallpaper" :key="new Date().getTime()"></album-product-wallpaper>
    </el-tabs>
  </div>
</template>

<script>
import AlbumProductTheme from './album-product-theme'
import AlbumProductWidge from './album-product-widge'
import AlbumProductWallpaper from './album-product-wallpaper'

export default {
  data () {
    return {
      activeName: "first",
      tableList: [
        {
          "meterNo": "first",
          "meterName": "主题专题内容",
        },{
          "meterNo": "second",
          "meterName": "组件专题内容",
        },{
          "meterNo": "third",
          "meterName": "壁纸专题内容",
        }
      ],
    }
  },
  components: {
    AlbumProductTheme,
    AlbumProductWidge,
    AlbumProductWallpaper
  },
  activated () {
    console.log("默认当前页" + this.activeName)
  },
  methods: {
    handleClick() {
      // 这样大家就可以拿到了
      console.log("当前点击页" + this.activeName)
      if (this.activeName === "first"){
        this.$nextTick(() => {
          this.$refs.albumProductTheme.init(123)
        })
      }
      if (this.activeName === "second"){
        this.$nextTick(() => {
          this.$refs.albumProductWidge.init(456)
        })
      }
      if (this.activeName === "third"){
        this.$nextTick(() => {
          this.$refs.albumProductWallpaper.init(789)
        })
      }
    },
  }
}
</script>
